import{d as e,M as i,A as d,h as s}from"./Anchors-CRD96j4l.js";import{D as a,a as r}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const c={path:"/view/virtuallist",name:"virtuallist",title:"Virtual List 虚拟列表"};function n(l){const t={a:"a",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...l.components};return i(s,{children:[i("div",{class:"sys-ctx-main-left",children:[i(t.h1,{id:"sp-",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:e(t.span,{className:"icon icon-link"})}),c.title]}),i(t.h2,{id:"sp-demos",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:e(t.span,{className:"icon icon-link"})}),"代码演示 "]}),e(a,{}),e(r,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { VirtualList } from "cui-virtual-list";

const createArray = (count: number) => {
    return new Array(count).fill(true).map(() => 1 + Math.round(Math.random() * 20))
};

const ListItem = (props: any) : any => {
    const style = {...props.style}
    return <div
        style={style}
        role="listitem"
        classList={{
            "ListItemOdd": props.index % 2 === 0,
            "ListItemEven": props.index % 2 === 1,
        }}
        ref={props.ref}
    >
        <div>Row {props.index}</div>
    </div>
}

export default () => {
    const data = createArray(1000);
    return <div style={{width: '300px', border: '1px solid #ccc'}}>
        <VirtualList height={300} items={createArray(1000)} itemEstimatedSize={20}>
            {ListItem}
        </VirtualList>
    </div>
}`,scopes:void 0,children:e(t.p,{children:"虚拟列表的基础用法。"})}),e(r,{id:"auto",title:"动态高度",src:"2auto.demo.tsx",code:`import { VirtualList } from "cui-virtual-list";

const createArray = (count: number) => {
    return new Array(count).fill(true).map(() => 1 + Math.round(Math.random() * 20))
};

const ListItem = (props: any) : any => {
    const style = {...props.style, height: (30 + props.item) + 'px'}
    return <div
        style={style}
        role="listitem"
        classList={{
            "ListItemOdd": props.index % 2 === 0,
            "ListItemEven": props.index % 2 === 1,
        }}
        ref={props.ref}
    >
        <div>Row {props.index}</div>
    </div>
}

export default () => {
    const data = createArray(1000);
    return <div style={{width: '300px', border: '1px solid #ccc'}}>
        <VirtualList height={300} items={data} itemEstimatedSize={20}>
            {ListItem}
        </VirtualList>
    </div>
}`,scopes:void 0,children:e(t.p,{children:"内容动态高度"})}),i(t.h2,{id:"props",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:e(t.span,{className:"icon icon-link"})}),"属性 "]}),i(t.table,{className:"sp-table",children:[e(t.thead,{children:i(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"属性"}),e(t.th,{style:{textAlign:"left"},children:"说明"}),e(t.th,{style:{textAlign:"left"},children:"类型"}),e(t.th,{style:{textAlign:"left"},children:"默认值"})]})}),i(t.tbody,{children:[i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"height"}),e(t.td,{style:{textAlign:"left"},children:"固定高度"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"maxHeight"}),e(t.td,{style:{textAlign:"left"},children:"最大高度"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"itemEstimatedSize"}),e(t.td,{style:{textAlign:"left"},children:"项目预估高度"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"overscan"}),e(t.td,{style:{textAlign:"left"},children:"前后预留数量"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"},children:"3"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"items"}),e(t.td,{style:{textAlign:"left"},children:"数据项"}),e(t.td,{style:{textAlign:"left"},children:"any[]"}),e(t.td,{style:{textAlign:"left"}})]})]})]})]}),`
`,`
`,`
`,e(d,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"auto",title:"动态高度",src:"2auto.demo.tsx"},{id:"props",depth:2,title:"属性"}]})]})}function m(l={}){const{wrapper:t}=l.components||{};return t?e(t,{...l,children:e(n,{...l})}):n(l)}export{m as default,c as frontmatter};
